<template class="home">
  <swiper indicator-dots circular>
    <swiper-item v-for="item in swipers" :key="item.id">
      <image :src="item.img"></image>
    </swiper-item>
  </swiper>
  <view class="nav">
    <view class="nav-item" v-for="(item, index) in navs" :key="index">
      <view @click="navItemClick(item.path)">
        <view class="item.icon"></view>
        <text>{{item.title}}</text>
      </view>
    </view>
  </view>
  <view class="hot">
    <view class="tit">推荐商品</view>
    <goods-list @goodsItemClick="goGoodsDetail" :goods="goods"></goods-list>
  </view>
</template>

<script>
import goodsList from '../../components/goods-list/goods-list.vue'
export default {
  data() {
    return {
      swipers: [],
      goods: [],
      navs: [
        {
          icon: 'iconfont icon-ziyuan',
          title: '黑马超市',
          path: '/pages/goods/goods'
        },
        {
          icon: 'iconfont icon-guanyuwomen',
          title: '联系我们',
          path: '/pages/contact/contact'
        },
        {
          icon: 'iconfont icon-tupian',
          title: '社区图片',
          path: '/pages/pics/pics'
        },
        {
          icon: 'iconfont icon-shipin',
          title: '学习视频',
          path: '/pages/videos/videos'
        }
      ]
    }
  },
  onLoad() {
    this.getSwipers()
    this.getHotGoods()
  },
  components: { "goods-list": goodsList },
  methods: {
    // 获取轮播图的数据
    async getSwipers() {
      const res = await this.$myRequest({
        url: '/api/getlunbo'
      })
      this.swipers = res.data.message
    },
    // 获取热门商品列表数据
    async getHotGoods() {
      const res = await this.$myRequest({
        url: '/api/getgoods?pageindex=1'
      })
      this.goods = res.data.message
    },
    // 导航点击的处理函数
    navItemClick(url) {
      uni.navigateTo({
        url
      })
    },
    // 导航到商品详情页
    goGoodsDetail(id) {
      uni.navigateTo({
        url: '/pages/goods-detail/goods-detail?id=' + id
      })
    }
  }
</script>